<!--头部导航-->
<template>
    <div class="pad20">
        <el-card class="box-card">
        <el-form :inline="true" :model="formData" class="demo-form-inline" size="mini">
            <el-form-item label="区域名称:">
                <el-input v-model="formData.name" placeholder="请输入区域名称" ></el-input><!--@keyup.enter.native="findUserBySouSuo"-->
            </el-form-item>
            <el-form-item label="状态:" >
                <el-select v-model="formData.state" class="auto-width" clearable filterable placeholder="状态" style="width: 85px">
                    <el-option
                            v-for="item in statusIdList"
                            :key="item.code"
                            :label="item.desc"
                            :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button icon='el-icon-search'size="mini" type="primary" @click="handleCheck">查询</el-button>
                <el-button icon='el-icon-refresh' size="mini" @click="handleReset">重置</el-button>
                <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="open()">添加</el-button>
            </el-form-item>
        </el-form>

        <!--表格数据-->
        <el-table
                :data="tableData"
                stripe
                size="medium"
                style="width: 100%"
                :border="true"
        >
            <el-table-column
                    prop="id"
                    label="编号"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="区域名称"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    label="管理员信息"
                    align="center"
            >
                <template slot-scope="scope">
                <el-button type="text" @click=openEmp(scope.row.id)>详细信息</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="区域地址"
                    align="center"
            >
            </el-table-column>
            <el-table-column width="180"
                             prop="state"
                             align="center"
                             label="状态">
                <template slot-scope="scope">
                    <el-switch
                            :active-value="1"
                            :inactive-value="0"
                            v-model="scope.row.state"
                            @change="changeStatus(scope.row)"
                            inactive-color="#13ce66"
                            active-color="#ff4949"
                            active-text="禁用"
                            inactive-text="正常">
                    </el-switch>
                </template>
            </el-table-column>
            <!--操作按钮-->
            <el-table-column
                    label="操作"
                    align="center"
                    width="300"
            >
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row.id)"
                            :disabled="scope.row.state==0">删除</el-button>
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.row)" type="success">编辑</el-button>
                    <el-button
                            size="mini"
                            @click="assAdmin(scope.row.id)" type="success">指定管理员</el-button>
                </template>
            </el-table-column>
        </el-table>
            <!--对话框查看区域管理员-->
            <el-dialog title="管理员信息" :visible.sync="dialogTableVisible">
                <el-table :data="empData">
                    <el-table-column property="id" label="编号" width="200"></el-table-column>
                    <el-table-column property="username" label="姓名" width="250"></el-table-column>
                    <el-table-column property="nick_name" label="备注" width="250"></el-table-column>
                </el-table>
            </el-dialog>

            <el-divider><i class="el-icon-moon-night"></i></el-divider>
        <!--分页-->
        <div class="mgt20">
            <el-pagination
                    background
                    style="float: right;margin-top: 20px; margin-bottom: 22px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[1, 5, 10, 15]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        </el-card>
        <!--添加用户的对话框-->
        <el-dialog  title="新增区域" :visible.sync="dialogFormVisible" width="600px" @closed="close">
            <el-form :model="areaForm" :rules="rules" ref="ruleForms" label-width="100px"  class="demo-ruleForm">
                <el-form-item label="区域名称" prop="name">
                    <el-input v-model="areaForm.name"></el-input>
                </el-form-item>
                <el-form-item label="区域地址" prop="address">
                    <el-input v-model="areaForm.address"></el-input>
                </el-form-item>
                <el-form-item label="状态:" >
                    <el-select v-model="areaForm.state" class="auto-width" clearable filterable placeholder="状态" style="width: 85px">
                        <el-option
                                v-for="item in addStatusIdList"
                                :key="item.code"
                                :label="item.desc"
                                :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="eldialog">
                    <el-form-item>
                        <el-button type="primary" @click="addArea()">提交</el-button>
                        <el-button @click="reset()" >重置</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </el-dialog>
        <!--指定区域管理员对话框-->
        <el-dialog title="区域管理员信息" :visible.sync="empdialogTableVisible"
                 >
            <el-table :data="empAllData"
                      highlight-current-row
                      @current-change="EmpChange">
                    <el-table-column property="id" label="编号" width="200"></el-table-column>
                    <el-table-column property="username" label="姓名" width="200"></el-table-column>
                    <el-table-column property="nickName" label="备注" width="250"></el-table-column>
       <!--         <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>-->

            </el-table>
            <el-button type="primary" @click="confirmEmp()" style="margin-left: 650px">确定</el-button>

        </el-dialog>

        <!--修改区域信息-->
        <el-dialog  title="修改区域信息" :visible.sync="editdialogFormVisible" width="600px" @closed="editclose">
            <el-form :model="editruleForm" :rules="rules" ref="editruleForms" label-width="100px"  class="demo-ruleForm">
                <el-form-item label="区域名称" prop="name">
                    <el-input v-model="editruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="区域地址" prop="address">
                    <el-input v-model="editruleForm.address"></el-input>
                </el-form-item>
                <div class="eldialog">
                    <el-form-item>
                        <el-button type="primary" @click="editHeadNav()">提交</el-button>
                        <el-button @click="editreset()" >重置</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "HeadNavigation",
        data(){
            return {
                //单选框的数据
               /* multipleSelection: [],*/
                //用来接受后台传来的表中的数据
                tableData: [],
                currentPage:1,
                pageSize:5,
                //总条数
                total:0,
                //管理员对话框弹出层控制
                dialogTableVisible: false,
                //指定管理员对话框
                empdialogTableVisible:false,
                //管理员信息对象
                empData:{},
                //管理员全部信息
                empAllData:{},
                //区域id
                areaid:"",
                //选中的员工信息
                currentRow: null,
                //表单数据对象
                formData:{
                    pageCurrent:0,
                    pageSize:0
                },
                //模糊查询下拉框
                statusIdList:[
                    {
                        code:'1',
                        desc:"禁用"
                    },
                    {
                        code:'0',
                        desc:"正常"
                    }],
                //添加状态下拉框
                addStatusIdList:[
                    {
                        code:'1',
                        desc:"禁用"
                    },
                    {
                        code:'0',
                        desc:"正常"
                    }],

                //下拉选项框的数据
                options:[{
                    value: '0',
                    label: '正常'
                },
                    {
                    value: '1',
                    label: '禁用'
                },
                ],
                dialogFormVisible:false,
                editdialogFormVisible:false,
                areaForm: {
                    name: '',
                    state: '',
                    address:''
                },
                editruleForm: {
                    name: '',
                    address:''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入区域名称', trigger: 'blur'},
                        { message: this.message, trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请输入区域地址', trigger: 'blur'},
                        { message: this.message, trigger: 'blur'}
                    ]
                },
            }
        },
        created() {
            //页面加载时调用查询的方法
            this.iniTable();
        },
        methods:{
           /* toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },*/
            //选中管理员改变事件
            EmpChange(val) {
                this.currentRow = val;
            },
            //改变当前每页的条数
            handleSizeChange(val) {
                this.pageSize=val;
                this.iniTable();

            },
            //改变当前页数
            handleCurrentChange(val) {
                this.currentPage=val;
                console.log("")
                this.iniTable()

            },
            //条件查询
            handleCheck(){
                this.iniTable()
            },
            // 重置查询条件
            handleReset() {
                this.reload()
            },
            //页面重载
            reload(){
                this.pageSize=5;
                this.currentPage=1;
                this.formData={}
                this.iniTable()
            },
            //开启dialog层
            open(){
                this.areaForm.state=this.addStatusIdList[0].code
                this.dialogFormVisible=true;
            },
            //重置表单数据
            reset(){
                this.$refs.ruleForms.resetFields();
            },
            editreset(){
                this.$refs.editruleForms.resetFields();
            },
            close(){
                this.$refs.ruleForms.resetFields();
            },
            editclose(){
                this.$refs.editruleForms.resetFields();
            },
            //分页查询当前的所有数据
            iniTable(){
              // this.formData.pageCurrent=this.currentPage;
              // this.formData.pageSize = this.pageSize;
              var that=this;
              this.$http.post(`/area/area/list/`+this.currentPage+"/"+this.pageSize,this.formData).then(function (resp){
                 if (resp.data.code===200){
                     that.tableData=resp.data.data.data.records;
                     that.total=resp.data.data.data.total;
                     console.log(resp)
                 }
                 if (resp.data.code===500){
                     that.$message({
                         message:resp.data.msg,
                         type:"error",
                     })
                     that.tableData=[];
                 }
              })
            },
            //详员工信息
            openEmp(id){
                this.dialogTableVisible = true;
                var that=this
                this.$http.post("/area/area/findEmp/"+id).then(function (result) {
                    that.empData=result.data.data;
                })
            },

            //根据传入的id与转态修改用户状态
            /*`/vd-area/area/updateState/${id}/${state}`*/
        changeStatus(row){
            const title = { 0: '启用', 1: '禁用' }
            this.$confirm(`确定要《《${title[row.state]}》》该用户吗?`, {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var that=this;
                this.$http.post("/area/area/updateArea",row).then(function (resp) {
                    if (resp.data.code===200){
                        that.$message.success(resp.data.msg);
                        that.iniTable();
                    }else {
                        that.$message.error(resp.data.msg);
                    }
                })
                this.reload()
            }).catch(() => {
                this.reload()
            })
        },

            handleDelete(id){
                var that = this;
                this.$confirm(`确定删除这条数据?`, '我要删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post("/area/area/deleteById/"+id).then(function (resp) {
                        console.log(resp)
                        if (resp.data.code===200){
                            that.$message.success(resp.data.msg);
                            that.iniTable();
                        }else{
                            that.$message.error(resp.data.msg);
                        }
                        /*that.iniTable()*/
                        that.reload()
                    })
                })
            },

            //修改区域信息弹出层
            handleEdit(row) {
                this.editdialogFormVisible=true
                this.editruleForm=row
                this. iniTable()
            },
            //指定管理员弹出层
            assAdmin(id){
                this.areaid=id;
                var that=this;
                //查询当前区域是否存在管理员
                this.$http.post("/area/area/exitEmp/"+id).then(function (result) {
                    if(result.data.code===500){
                        console.log(result.data.code)
                        that.$message.error(result.data.msg);
                    }else{
                        that.empdialogTableVisible=true;
                        //查找全部的管理员信息
                        that.$http.post("/area/area/findAllEmp").then(function (result) {
                            that.empAllData=result.data.data
                        })
                    }
                })

            },
            //确定分配管理员事件
            confirmEmp(){
               /* if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }*/
                console.log(this.currentRow)
                console.log(this.areaid)
                var that=this;
                this.$http.post("/area/area/confirmEmp/"+this.areaid,this.currentRow).then(function (result) {
                    that.$message.success(result.data.msg);
                    that.empdialogTableVisible=false;
                })
            },

            //添加导航标题
            addArea(){
                var that=this;
                this.$refs.ruleForms.validate((valid)=>{
                    if (valid){
                        this.$http.post("area/area/addArea",this.areaForm).then(function (resp) {
                            if (resp.data.code===200){
                                that.$message({
                                    message:resp.data.msg,
                                    type:"success"
                                })
                            }else{
                                that.$message({
                                    message:resp.data.msg,
                                    type:"error"
                                })
                            }
                            that.dialogFormVisible=false;
                            that.iniTable();
                        })
                    }else {
                        this.$message({
                            message:"输入框不能为空",
                            type:"error"
                        })
                    }
                })
            },
            editHeadNav(){
                var that=this;
                this.$refs.editruleForms.validate((valid)=>{
                    if (valid){
                        this.$http.post("/area/area/updateArea",this.editruleForm).then(function (resp) {
                            if (resp.data.code===200){
                                that.$message({
                                    message:resp.data.msg,
                                    type:"success"
                                })

                            }else{
                                that.$message({
                                    message:resp.data.msg,
                                    type:"error"
                                })
                            }
                            that.editdialogFormVisible=false;
                            that.iniTable();
                        })
                    }else {
                        this.$message({
                            message:"输入框不能为空",
                            type:"error"
                        })
                    }
                })
        }
    }

    }
</script>

<style scoped>
    .elpage ,.eldialog{
        display: flex;
        justify-content: right;
    }
</style>
